<template>
	{{ insertData }}
	<view class="graphics-back">
		<text class="graphics-Title">请详细描述你的病情</text>
		<textarea v-model="insertData.illness" placeholder="为了更好获得医生帮助,请尽可能详细描述病情" maxlength="300"
			placeholder-class="textarea-color" :auto-focus="true" />
	</view>
	<!-- 指导用药 -->
	<view class="graphics-back">
		<checkbox-group @change="checkboxChange">
			<label>
				<checkbox value="cb" :checked="insertData.guide" color="#0176ff" />需要医生指导用药
			</label>
		</checkbox-group>
	</view>
	<!-- 上传图片 -->
	<view class="graphics-back">
		<text class="graphics-Title">上传检查报告或患处照片</text>
		<view class="pat-image">
			<view class="upload-Image" v-for="(item, index) in insertData.ins_report" :key="index">
				<image :src="item" mode="aspectFill"></image>
				<image src="/static/other/shanchu-goods.svg" mode="widthFix"
					@click="insertData.ins_report.splice(index, 1)">
				</image>
			</view>
			<view>
				<image src="/static/other/shuxing-img.png" @click="upload" mode="aspectFill"></image>
			</view>
		</view>
	</view>
	<!-- 选择就诊人 -->
	<view class="graphics-back">
		<text class="graphics-Title">选择就诊人</text>
		<view class="patient-view">
			<image src="/static/other/touxiang.svg" mode="widthFix"></image>
			<text>{{ name }}</text>
			<text @click="choosePatient">选择就诊人</text>
		</view>
	</view>
	<!-- 提交 -->
	<view style="height:300rpx"></view>
	<view class="submit">
		<text @click="canCel">取消</text>
		<text @click="subMit">提交</text>
	</view>
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { reactive, toRefs, watch } from 'vue'
import { graphicsType } from "@/types/index"
import { chooseImgApi, fileUploadApi } from "@/utils/upload"
import { baseURL } from "@/serve/config"
// 引入仓库
import { usePatient } from "@/store/index"
const store = usePatient()
// 2.定义页面响应式数据
let pageData = reactive({
	insertData: {
		illness: "",
		guide: false,
		ins_report: [],
		patient_id: "",
	} as graphicsType,
	name: "",//就诊人姓名只做展示使用不做提交
})

// 3.批量解构创建响应式数据
let { insertData, name } = toRefs(pageData)

// 4.监听是否需要医师知道用药
function checkboxChange() {
	pageData.insertData.guide = !pageData.insertData.guide
}

// 5.监听用户上传图片
async function upload() {
	// 5.1获取用户使用端（电脑 手机 ipad）的本地文件资源信息（图片）
	// 原生：input type=file
	// ui库：基于原生封装（input type=file）


	try {
		// 使用微信小程序的图片api函数获取本地图片资源信息
		let res: any = await chooseImgApi()
		console.log(res.tempFilePaths[0])
		// 5.2将本地资源发送给后端（服务端）后端返回可以被外网访问的链接地址
		let fileRes: any = await fileUploadApi(baseURL + "/upload_picture", 'file', res.tempFilePaths[0])
		console.log(fileRes)
		pageData.insertData.ins_report.push(JSON.parse(fileRes.data).data)
	} catch (error) {
		console.log(error)
	}



}

// 6.跳转到纠正人列表选择页面
function choosePatient() {
	uni.navigateTo({ url: "/pages/myPatient/myPatient" })
}

// 7.监听store就诊人数据的变化
store.$subscribe((mutations, state) => {
	pageData.name = state.patientData.name
	pageData.insertData.patient_id = state.patientData._id
})


</script>
  
  
<style>
/* 表单提交 */
@import url('../../common-style/form.css');

page {
	background-color: #fafafa;
}

.graphics-back {
	background-color: #ffffff;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
}

.graphics-Title {
	font-size: 35rpx;
	font-weight: bold;
	display: block;
	padding-bottom: 20rpx;
}

textarea {
	width: 100%;
	height: 250rpx;
}

.textarea-color {
	color: #00c8c8;
}

/* 上传图片 */
.pat-image {
	display: flex;
	flex-wrap: wrap;
}

.pat-image view {
	width: calc(33.3% - 5rpx*2);
	height: 200rpx;
	margin: 5rpx;
}

.pat-image image {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 7rpx;
}

.upload-Image {
	position: relative;
}

.upload-Image image:nth-child(2) {
	width: 30rpx !important;
	height: 30rpx !important;
	position: absolute;
	top: 0;
	right: 0;
}

/* 选择就诊人 */
.patient-view {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.patient-view image {
	width: 120rpx;
	height: 120rpx;
}

.patient-view text:nth-child(2) {
	flex: 1;
	padding: 0 50rpx;
	font-weight: bold;
}

.patient-view text:nth-child(3) {
	color: #2c76ef;
}
</style>